import React from 'react'
import { MyTitle } from '@/assets/ts/config'
import { useRouter } from '@/utils/routeTo'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/modules/RootState'

function MyMusic() {
  const {routeTo} = useRouter()
  const dispatch = useDispatch()
  const musicList = useSelector((state:RootState) => state.musicList);

  const gotoMusic = (item:any) =>{
    if(item.title == "我喜欢的音乐"){
      routeTo(item.path)
      
    }
  }

  return (
    <div>
        <ul>
            {
                MyTitle.map((item,index)=>{
                 return(
                    <li key={index} onClick={()=>gotoMusic(item)}>
                        <img src={item.svg} alt="" />
                        <span>{item.title}</span>
                    </li>
                 )   
                })
            }
        </ul>
    </div>
  )
}

export default React.memo(MyMusic)